﻿<!DOCTYPE HTML>

<html>
  <head>
    <meta charset="UTF-8">
    <title>EasyUI Tree樹容器展示</title>
    <!-- EasyUI framework -->
    <link rel="stylesheet" href="../js/easyui/1.3.2/themes/default/easyui.css">
    <link rel="stylesheet" href="../js/easyui/1.3.2/themes/icon.css">
    <link rel="stylesheet" href="../js/easyui/1.3.2/demo/demo.css">
    <script src="../js/easyui/1.3.2/jquery-1.8.0.min.js"></script>
    <script src="../js/easyui/1.3.2/jquery.easyui.min.js"></script>
  </head>

  <body>
	<h2>Basic Tree</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div style="font-size:1.6em">點擊左側箭頭以展開或收合節點</div>
	</div>
	<div style="margin:10px 0;"></div>
	<ul id="demoTree" class="easyui-tree">
		<li>
			<span>My Documents</span>
			<ul>
				<li data-options="state:'closed'">
					<span>Photos</span>
					<ul>
						<li>
							<span>Friend</span>
						</li>
						<li>
							<span>Wife</span>
						</li>
						<li>
							<span>Company</span>
						</li>
					</ul>
				</li>
				<li>
					<span>Program Files</span>
					<ul>
						<li>Intel</li>
						<li>Java</li>
						<li>Microsoft Office</li>
						<li>Games</li>
					</ul>
				</li>
				<li>index.html</li>
				<li>about.html</li>
				<li>welcome.html</li>
			</ul>
		</li>
	</ul>
  <script>
      var menuData = [{
            "id":1,
            "text":"My Documents",
            "children":[{
                "text":"Photos",
                "state":"closed",
                "children":[
                  {"text":"Friend"},
                  {"text":"Wife"},
                  {"text":"Company"}
                ]
              },{
                "text":"Program Files",
                "children":[
                  {"text":"Intel"},
                  {"text":"Java"},
                  {"text":"Microsoft Office"},
                  {"text":"Games"}
                ]
              },{"text":"index.html"},{"text":"about.html"},{"text":"welcome.html"}]
        }]
      $("#demoTree").tree({
        data: menuData
      });
  </script>
  </body>
</html>

